import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card, Row, Input, Button, Col, Modal, Icon, Select, Divider, Form, Radio, Cascader, Alert } from 'antd';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import OptionInput from '@/components/OptionInput';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;

@connect(({ settings }) => ({

}))
@Form.create()
class FillInItemModal extends PureComponent {
  state = {
    confirmLoading: false,
  }
  
  handleCancel = () => {
    this.props.callback();
  }

  handleSubmit = (e) => {
    const { form, dispatch } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
        this.setState({
          confirmLoading: true,
        });
        dispatch({
          type: 'settings/setFillInItem',
          payload: values,
          callback: (res) => {
            if (res) {
              this.setState({
                confirmLoading: false,
              });
              this.props.callback();
            }
          }
        })
      }
    });
  }

  handleOk = (e) => {
    this.handleSubmit(e);
  }

  render() {
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19 },
      },
    };
    const { writeModalVisible } = this.props

    const { confirmLoading } = this.state;

    const {
      form: { getFieldDecorator },
    } = this.props;
    return (
      <Modal
        title="填写项"
        visible={writeModalVisible}
        onCancel={this.handleCancel}
        confirmLoading={confirmLoading}
        onOk={this.handleOk}
      >
        <Form {...formItemLayout} onSubmit={this.handleSubmit}>
          <Row gutter={24}>
            <Col md={24}>
              <Alert message="提示信息 :用于添加（姓名，学号，等需要填写的信息），在下方标题空填写所需收集的信息填空项" type="info" />
            </Col>
          </Row>
          <div style={{ height: 45 }} />
          <FormItem label="标题">
            {getFieldDecorator('title', {
              rules: [
                {
                  required: true,
                }
              ]
            })(<Input />)}
          </FormItem>
          <FormItem label="类型">
            {getFieldDecorator('type', {
              rules: [
                {
                  required: true,
                }
              ],
              initialValue: 1
            })(
              <RadioGroup name="radiogroup">
                <Radio value={1}>必填</Radio>
                <Radio value={2}>选填</Radio>
              </RadioGroup>)}
          </FormItem>
        </Form>
      </Modal>
    )
  }
}
export default FillInItemModal